<!-- 
	动态组件：商品列表组件
	props: 
		data: 组件数据
		
	action:
		
 -->
<template>
    <view :class="data.GoodsListStyle == 5 ? 'dynamic-pro-list-scroll' : 'dynamic-pro-list'">
        <!-- 横向列表 -->
        <scroll-view
            v-if="data.GoodsListStyle == 5"
            class="pro-scroll"
            scroll-x
            @scrolltolower="scrolltolower"
            lower-threshold="150">
            <view class="style-6">
                <view
                    class="dynamic-pro-item"
                    :style="{ background: data.GoodsListbg, 'border-radius': getHeight(data.GoodsListRadius) }"
                    v-for="(item, index) in datas"
                    :key="index"
                    @click="goDetail(item)">
                    <image
                        v-if="data.GoodsListShowCorner"
                        :class="{
                            'dynamic-pro-corner-new-en': data.GoodsListCornerStyle == 'new-en',
                            'dynamic-pro-corner-new': data.GoodsListCornerStyle == 'new',
                        }"
                        class="dynamic-pro-corner"
                        :src="data.GoodsListCornerImg"
                        mode="aspectFill"></image>
                    <view>
                        <view class="dynamic-pro-image-box" :style="{ height: imageHeight }">
                            <image
                                mode="aspectFill"
                                class="dynamic-pro-image"
                                :style="{
                                    'border-top-left-radius': getHeight(data.GoodsListRadius),
                                    'border-top-right-radius': getHeight(data.GoodsListRadius),
                                }"
                                :src="easyGetImgUrl(item.ThumbnailUrl410)"></image>
                            <view class="dynamic-pro-stock" v-if="data.GoodsListShowStock">
                                <text>库存：{{ item.V_StockSum }}</text>
                            </view>
                        </view>

                        <view class="dynamic-pro-info">
                            <text class="dynamic-pro-info-name" v-if="data.GoodsListShowName">{{
                                item.ProductName
                            }}</text>
                            <scroll-view scroll-x :show-scrollbar="false">
                                <view class="taglist" v-if="item.TagsList.length > 0 && data.GoodsListShowTag">
                                    <view v-for="tag in item.TagsList">{{ tag.Name }}</view>
                                </view>
                            </scroll-view>
                            <view class="price-bar">
                                <view class="price-bar-box">
                                    <text class="dynamic-pro-info-price-unit" v-if="data.GoodsListShowPrice">￥</text>
                                    <text class="dynamic-pro-info-price" v-if="data.GoodsListShowPrice">{{
                                        item.SaleMinPrice == item.SaleMaxPrice
                                            ? item.SaleMaxPrice
                                            : `${item.SaleMinPrice}~${item.SaleMaxPrice}`
                                    }}</text>
                                    <text
                                        class="dynamic-pro-info-price-origin"
                                        v-if="
                                            data.GoodsListShowOriginalPrice &&
                                            item.RetailMaxPrice &&
                                            item.RetailMinPrice < item.RetailMaxPrice
                                        "
                                        >￥{{ item.RetailMaxPrice }}</text
                                    >
                                    <text
                                        class="dynamic-pro-info-price-origin"
                                        v-if="
                                            data.GoodsListShowOriginalPrice &&
                                            item.RetailMinPrice &&
                                            !(item.RetailMinPrice < item.RetailMaxPrice)
                                        "
                                        >￥{{ item.RetailMinPrice }}</text
                                    >
                                </view>
                                <text class="price-btn-buy" @click.stop="buyFn(item)" v-if="data.GoodsListShowBuyBtn"
                                    >购买</text
                                >
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- 竖向列表 -->
        <view v-else>
            <view
                :class="{
                    'style-2': data.GoodsListStyle == 1,
                    'style-4': data.GoodsListStyle == 3,
                    'style-5': data.GoodsListStyle == 4,
                }">
                <view
                    class="dynamic-pro-item"
                    :style="{ background: data.GoodsListbg, 'border-radius': getHeight(data.GoodsListRadius) }"
                    v-for="(item, index) in datas"
                    :key="index"
                    @click="goDetail(item)">
                    <image
                        v-if="data.GoodsListShowCorner"
                        :class="{
                            'dynamic-pro-corner-new-en': data.GoodsListCornerStyle == 'new-en',
                            'dynamic-pro-corner-new': data.GoodsListCornerStyle == 'new',
                        }"
                        class="dynamic-pro-corner"
                        :src="data.GoodsListCornerImg"
                        mode="aspectFill"></image>
                    <view
                        :class="{
                            'style-1': data.GoodsListStyle == 0,
                            'style-3': data.GoodsListStyle == 2,
                        }">
                        <view
                            class="dynamic-pro-image-box"
                            :style="{
                                height:
                                    data.GoodsListStyle == 3
                                        ? index % 3 == 0
                                            ? imageHeight1
                                            : imageHeight2
                                        : imageHeight,
                            }">
                            <image
                                mode="aspectFill"
                                class="dynamic-pro-image"
                                :style="{
                                    'border-top-left-radius': getHeight(data.GoodsListRadius),
                                    'border-top-right-radius': getHeight(data.GoodsListRadius),
                                }"
                                :src="easyGetImgUrl(item.ThumbnailUrl410)"></image>
                            <view class="dynamic-pro-stock" v-if="data.GoodsListShowStock">
                                <text>库存：{{ item.V_StockSum }}</text>
                            </view>
                        </view>

                        <view class="dynamic-pro-info">
                            <text class="dynamic-pro-info-name" v-if="data.GoodsListShowName">{{
                                item.ProductName
                            }}</text>
                            <scroll-view scroll-x :show-scrollbar="false">
                                <view class="taglist" v-if="item.TagsList.length > 0 && data.GoodsListShowTag">
                                    <view v-for="tag in item.TagsList">{{ tag.Name }}</view>
                                </view>
                            </scroll-view>
                            <view class="price-bar price-bar-ver">
                                <view class="point-bar-box" v-if="item.IsPointReward > 0">
                                    <point :minPoints="item.MinPoints" />
                                </view>
                                <view class="price-bar-box" v-else>
                                    <view style="display: flex; align-items: baseline">
                                        <text class="dynamic-pro-info-price-unit" v-if="data.GoodsListShowPrice"
                                            >￥</text
                                        >
                                        <!-- <text class="dynamic-pro-info-price" v-if="data.GoodsListShowPrice">{{item.SaleMinPrice==item.SaleMaxPrice?item.SaleMaxPrice:`${item.SaleMinPrice}~${item.SaleMaxPrice}`}}</text> -->
                                        <text class="dynamic-pro-info-price" v-if="data.GoodsListShowPrice">{{
                                            item.SaleMinPrice == item.SaleMaxPrice
                                                ? item.SaleMaxPrice
                                                : item.SaleMinPrice
                                        }}</text>
                                    </view>
                                    <text
                                        class="dynamic-pro-info-price-origin"
                                        v-if="
                                            data.GoodsListShowOriginalPrice &&
                                            item.RetailMaxPrice &&
                                            item.RetailMinPrice < item.RetailMaxPrice &&
                                            item.RetailMaxPrice != item.SaleMaxPrice
                                        "
                                        >￥{{ item.RetailMaxPrice }}</text
                                    >
                                    <text
                                        class="dynamic-pro-info-price-origin"
                                        v-if="
                                            data.GoodsListShowOriginalPrice &&
                                            item.RetailMinPrice &&
                                            !(item.RetailMinPrice < item.RetailMaxPrice) &&
                                            item.RetailMinPrice != item.SaleMaxPrice
                                        "
                                        >￥{{ item.RetailMinPrice }}</text
                                    >
                                </view>
                                <text class="price-btn-buy" @click.stop="buyFn(item)" v-if="data.GoodsListShowBuyBtn"
                                    >购买</text
                                >
                            </view>
                        </view>
                        <view class="dynamic-pro-action-bar" v-if="false">
                            <view class="dynamic-pro-action-unit"></view>
                            <button class="dynamic-pro-action-btn-buy">购买</button>
                        </view>
                    </view>
                </view>
            </view>
            <uni-load-more v-if="isLoading" status="loading"></uni-load-more>
        </view>
    </view>
</template>

<script>
import { getWholeSaleListForSku } from "@/service/api/product.js"
import productSpec from "@/components/product/product-spec.vue"
import utilsOld from "@/utils/utilsOld.js"
import storage from "@/uni-sub-base/utils/storage.js"
import { changeArr } from "@/utils/productUtil.js"
import { getHeight } from "./utils/util.js"
import point from "@/components/product/point.vue"

export default {
    components: {
        productSpec,
        point,
    },
    props: {
        data: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            imageHeight1: "",
            imageHeight2: "",
            imageHeight5: "",
            imageHeight: "",
            datas: [],
            pageIndex: 1,
            isDataLoadOk: false,
            isLoading: false,
            priceDecimalPlaces: 2,
            isoneload: true,
        }
    },
    mounted() {
        let productDisplay = storage.getCache("productDisplay")
        if (productDisplay) {
            this.priceDecimalPlaces = productDisplay.PriceDecimalPlaces
        }
        //获取同宽的高度
        this.getImageHeight()
        this.getData()
    },
    methods: {
        //加载数据
        getData() {
            let param = {}
            if (this.data.GoodsListLoadType == "sale") {
                param.OrderBy = "sale_counts"
            }
            if (this.data.GoodsListLoadType == "tag") {
                param.TagIds = this.data.GoodsListLoagTypeBytag
            }
            if (this.data.GoodsListLoadType == "category") {
                param.categoryIds = this.data.GoodsListLoadByCategory
            }
			if (this.data.GoodsListLoadType == "new") {
			    param.Sort = 'desc'
			}
            param.PageIndex = this.pageIndex
            param.PageSize = Number(this.data.GoodsListPageSize)

            if (this.data.GoodsListSourcetype == "choice" && this.data.GoodsListProductIds) {
                let idsArr = this.data.GoodsListProductIds.split(",")
                param.productIds = this.data.GoodsListProductIds
                param.PageSize = idsArr.length + 1
                this.setLoadBack()
            }
            if (this.data.GoodsListStyle == 5) {
                this.setLoadBack()
            }
            let webInfo = storage.getCache("webInfo")
            if (webInfo.IsSelectWarehouse == 1) {
                let warehouse = storage.getCache("warehouse")
                param.warehouseId = warehouse.WarehouseId
            }
			if (this.data.GoodsListSourcetype == "plant") {
			   param.ProductType = 6
			}
			if(this.data.GoodsListLoagTypeByplant){
				param.warehouseId = this.data.GoodsListLoagTypeByplant
			}
			if (this.data.GoodsListSourcetype == "plant" && this.data.GoodsListLoagTypeByplant) {
			   param.PageSize = Number(this.data.GoodsListPlantPageSize)
			   if (this.data.GoodsListLoadTypePlant == "sale") {
			       param.OrderBy = "sale_counts"
			   }
			   if (this.data.GoodsListLoadTypePlant == "new") {
			       param.Sort = 'desc'
			   }
			   if (this.data.GoodsListLoadTypePlant == "tag") {
			       param.TagIds = this.data.GoodsListLoagTypeByplantTag
			   }
			}
			
            this.isLoading = true
            if (this.isoneload) {
                this.isoneload = false
                getWholeSaleListForSku(param).then((res) => {
                    this.isLoading = false
                    if (res.Data && res.Data.Data) {
                        this.isoneload = true
                        if (this.data.GoodsListSourcetype == "choice" && this.data.GoodsListProductIds) {
                            let idsArr = this.data.GoodsListProductIds.split(",")
                            let lists = []
                            idsArr.forEach((item) => {
                                res.Data.Data.forEach((subitem) => {
                                    if (item == subitem.ID) {
                                        lists.push(subitem)
                                    }
                                })
                            })
                            this.datas = lists
                        } else {
                            this.datas = this.datas.concat(res.Data.Data)
                        }
                        if (this.data.GoodsListShowLoadMore) {
                            if (this.datas.length >= res.Data.RecordAmout) {
                                this.isDataLoadOk = true
                                this.setLoadBack()
                            } else {
                                this.pageIndex += 1
                            }
                        } else {
                            this.setLoadBack()
                        }

                        changeArr(this.datas, false, this)
                    } else {
                        this.isDataLoadOk = true
                        this.setLoadBack()
                    }
                })
            }
        },
        //组件加载完成
        setLoadBack() {
            this.$emit("loadBack", this.data.index)
        },
        listGetMoreData() {
            if (this.data.GoodsListStyle != 5 && this.data.GoodsListShowLoadMore) {
                this.scrolltolower()
            }
        },
        scrolltolower() {
            if (!this.isDataLoadOk && this.data.GoodsListSourcetype != "plant") {
                this.getData()
            }
        },
        //获取同宽的高度
        getImageHeight() {
            let that = this
            uni.getSystemInfo({
                //调用uni-app接口获取屏幕高度
                success(res) {
                    //成功回调函数
                    let w = res.screenWidth
                    //页面边距
                    let paddingW = uni.upx2px(48)

                    //item边距
                    let paddingW2 = uni.upx2px(20)
                    let paddingW5 = uni.upx2px(36)

                    that.imageHeight5 = (w - paddingW - paddingW5) / 3 + "px"
                    that.imageHeight2 = (w - paddingW - paddingW2) / 2 + "px"
                    that.imageHeight1 = w - paddingW + "px"

                    if (that.data.GoodsListStyle == "0") {
                        that.imageHeight = that.imageHeight1
                    } else if (that.data.GoodsListStyle == 1) {
                        that.imageHeight = that.imageHeight2
                    } else if (that.data.GoodsListStyle == 4 || that.data.GoodsListStyle == 5) {
                        that.imageHeight = that.imageHeight5
                    }
                },
            })
        },
        goDetail(item) {
            if (this.getAppSet().isHideProDetail) {
                return
            }
            if (this.getAppSet().pagesClassify || this.data.GoodsListLoagTypeByplant) {
				if(this.data.GoodsListSourcetype == "plant" && this.data.GoodsListLoagTypeByplant){
					this.easyGoTo(`/pages_classify/packet/product/productDetail?id=${item.ID}&InfoType=6&wareHouseId=${this.data.GoodsListLoagTypeByplant}`)
				}else{
					this.easyGoTo(`/pages_classify/packet/product/productDetail?id=${item.ID}&InfoType=${item.SkuType}`)
				}
            } else {
                if (this.getSupplierMode() == 0) {
                    this.easyGoTo(`/pages_shop/packet/product/productDetail?id=${item.ID}&InfoType=${item.SkuType}`)
                } else if (this.getSupplierMode() == 1) {
                    this.easyGoTo(`/pages_shop/packet/product/productDetail?id=${item.ID}&InfoType=${item.SkuType}`)
                }
            }
        },
        buyFn(item) {
            let token = storage.getCache("token")
            if (!token || token == "") {
                this.$showModal({ show: true })
                return
            }
            this.$emit("buyFn", item)
        },
        getHeight(height) {
            return getHeight(height)
        },
    },
}
</script>

<style lang="scss" scope>
@import "@/uni-sub-base/components/dynamic/style/dynamic.scss";
.pro-scroll {
    white-space: nowrap;
    width: 100%;
}
.dynamic-pro-item {
    background: #ffffff;
    margin-bottom: 20rpx;
    position: relative;
    // overflow: hidden;
}
.dynamic-pro-corner {
    position: absolute;
    top: 10rpx;
    left: 10rpx;
    width: 72rpx;
    height: 72rpx;
    z-index: 10;
}
.dynamic-pro-corner-new {
    top: 0rpx;
    left: 0rpx;
    width: 72rpx;
    height: 52rpx;
}
.dynamic-pro-corner-new-en {
    top: 0rpx;
    left: 0rpx;
}
.dynamic-pro-list {
    padding: 24rpx 24rpx 4px;
}
.dynamic-pro-list-scroll {
    padding: 24rpx 0 4px;
}
.dynamic-pro-image-box {
    position: relative;
    width: 600rpx;
    height: 400rpx;
    flex: none;
    .dynamic-pro-image {
        width: 100%;
        height: 100%;
    }
    .dynamic-pro-stock {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 66rpx;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        text {
            color: #ffffff;
        }
    }
}
.dynamic-pro-info {
    // padding: 12rpx;
    .dynamic-pro-info-name {
        display: flex;
        padding: 12rpx 12rpx 0;
        margin-bottom: 16rpx;
    }
    .del-text {
        text {
            color: #999999;
        }
    }
    .price-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        .price-bar-box {
            flex: 1;
        }
        .point-bar-box {
            padding-left: 12rpx;
        }
        .dynamic-pro-info-price-unit {
            display: inline-block;
            margin-left: 12rpx;
            margin-bottom: 12rpx;
            color: #ec612a;
            font-weight: bold;
            font-size: 26rpx;
        }
        .dynamic-pro-info-price {
            font-weight: bold;
            font-size: 32rpx;
            color: #ec612a;
        }
        .dynamic-pro-info-price-origin {
            padding-left: 8rpx;
            // text-decoration: line-through;
        }
        .price-btn-buy {
            margin-right: 12rpx;
            margin-bottom: 12rpx;
        }
    }
    .price-bar-ver {
        justify-content: space-between;
        padding-bottom: 12rpx;
        .price-bar-box {
            display: flex;
            flex-direction: column;
        }
        .dynamic-pro-info-price {
            font-size: 28rpx;
        }
        .dynamic-pro-info-price-origin {
            color: #999;
            margin-top: -10rpx;
            margin-left: 6rpx;
        }
        .price-btn-buy {
            margin-bottom: 0;
            width: 88rpx;
            height: 44rpx;
            border-radius: 22rpx;
            padding: 0;
            line-height: 44rpx;
            text-align: center;
        }
    }
}
.price-btn-buy {
    padding: 8rpx 36rpx;
    background: $app-color-main;
    color: #ffffff;
    border-radius: 80rpx;
}
.dynamic-pro-action-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .dynamic-pro-action-unit {
        flex: 1;
    }
}
.style-1 {
    .dynamic-pro-image-box {
        width: 100%;
    }
}
.style-2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    .dynamic-pro-item {
        width: calc(50% - 10rpx);
        .dynamic-pro-image-box {
            width: 100%;
            height: 100%;
        }
        .dynamic-pro-info-name {
            height: 66rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-bottom: 0;
        }
    }
}
.style-3 {
    display: flex;
    flex-direction: row;

    .dynamic-pro-image-box {
        width: 220rpx;
        height: 220rpx;
    }
    .dynamic-pro-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        .dynamic-pro-info-name {
            height: 66rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
}
.style-4 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    .dynamic-pro-item {
        width: calc(50% - 10rpx);
        &:nth-child(3n + 1) {
            width: 100%;
        }
        .dynamic-pro-image-box {
            width: 100%;
            height: 100%;
        }
        .dynamic-pro-info-name {
            height: 66rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
}
.style-5 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    &::after {
        content: "";
        width: calc(33% - 12rpx);
    }
    .dynamic-pro-item {
        width: calc(33% - 12rpx);
        .dynamic-pro-image-box {
            width: 100%;
            height: 100%;
        }
        .dynamic-pro-info-name {
            display: block;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            text-align: center;
            padding: 18rpx 18rpx 0;
            margin-bottom: 8rpx;
        }
        .price-bar {
            display: block;
            text-align: center;
            padding-bottom: 20rpx;
        }
        .price-bar-box {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 10rpx;
            .dynamic-pro-info-price-unit {
                margin: 0;
            }
        }
        .price-btn-buy {
            margin: 0 auto;
            display: block;
        }
    }
}
.style-6 {
    display: flex;
    flex-direction: row;
    .dynamic-pro-item {
        margin-left: 24rpx;
        .dynamic-pro-image-box {
            width: 200rpx;
            height: 200rpx;
        }
        .dynamic-pro-info {
            width: 200rpx;
        }
        .dynamic-pro-info-name {
            height: 66rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: initial;
            padding: 18rpx 18rpx 0;
            margin-bottom: 8rpx;
        }
        .price-bar {
            display: block;
            text-align: center;
            padding-bottom: 20rpx;
        }
        .price-bar-box {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 10rpx;
            .dynamic-pro-info-price-unit {
                margin: 0;
            }
        }
        .price-btn-buy {
            margin: 0;
            // display: block;
        }
    }
}
.taglist {
    display: flex;
    padding: 0 12rpx;
    white-space: nowrap;
    width: calc(100% - 72rpx);
    view {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 8rpx;
        height: 40rpx;
        background: rgba(236, 97, 42, 0.1);
        border-radius: 6rpx;
        font-size: 22rpx;
        font-family:
            PingFangSC-Regular,
            PingFang SC;
        font-weight: 400;
        color: #ec612a;
        margin-right: 12rpx;
        margin-bottom: 12rpx;
    }
}
</style>
